<!-- author: xuett -->
<!-- date: 2024-06-18 11:44:40 -->
<!-- description: 布局页 -->
<template>
  <div class="container">
    <!-- 左侧组件 -->
    <leftChart></leftChart>
    <!-- 容器 -->
    <div class="main-box">
      <div class="header"></div>
      <!-- 主体内容 -->
      <div
        ref="mainRef"
        class="main-content"
        :style="{ backgroundColor: containerInfo.backgroundColor }"
        @mousemove="mousemove"
        @mouseup="mouseup"
        @click="containerClick"
      >
        <draggable class="drag-group" :list="chartList" group="chartDrag" :sort="false" @add="draggableAdd" item-key="id">
          <template #item="{ element, index }">
            <div
              :class="['chart-item']"
              :style="{ left: element.left + 'px', top: element.top + 'px', width: element.width + 'px', height: element.height + 'px' }"
              @mousedown="mousedown($event, index)"
            >
              <component :is="element.component" :chartInfo="element"></component>
            </div>
          </template>
        </draggable>
        <!-- 缩放框 -->
        <scaleBox ref="scaleRef" v-show="activeIndex !== -1" :containerInfo="containerInfo" @asyncChartInfo="asyncChartInfo"></scaleBox>
      </div>
    </div>
    <!-- 右侧配置 -->
    <rightSetting v-model:container="containerInfo" v-model:chart="activeChart" @updateScale="updateScale(activeChart)"></rightSetting>
  </div>
</template>

<script>
import chartComponents from "@/components/charts/";

export default {
  components: chartComponents
};
</script>

<script setup>
import draggable from "vuedraggable";

import leftChart from "./components/left-chart.vue";
import scaleBox from "./components/scale-box.vue";
import rightSetting from "./components/right-setting.vue";

const chartList = ref([]);

const mainRef = ref(null);
const scaleRef = ref(null);
const state = reactive({
  containerInfo: {
    domWidth: 0,
    domHeight: 0,
    width: 1920,
    height: 1080,
    backgroundColor: "#fff"
  },
  activeIndex: -1,
  activeChart: null
});
const { containerInfo, activeIndex, activeChart } = toRefs(state);

onMounted(() => {
  //获取容器宽高
  state.containerInfo.domWidth = mainRef.value.offsetWidth;
  state.containerInfo.domHeight = mainRef.value.offsetHeight;
});

// 组件添加
const draggableAdd = (event) => {
  let curItem = chartList.value[event.newIndex];
  curItem.id = Date.now();
  curItem.left = event.originalEvent.offsetX;
  curItem.top = event.originalEvent.offsetY;
  state.activeIndex = event.newIndex;
  state.activeChart = curItem;
  updateScale(curItem); //同步选中组件信息到缩放框
};

//容器点击
const containerClick = (event) => {
  // console.log(event);
};

// 鼠标按下事件
const mousedown = (event, activeIndex) => {
  event.preventDefault();
  state.activeIndex = activeIndex;
  state.activeChart = chartList.value[activeIndex];
  updateScale(chartList.value[activeIndex], event); //同步选中组件信息到缩放框
};

// 鼠标移动事件
const mousemove = (event) => {
  if (state.activeIndex != -1 && chartList.value[state.activeIndex]) {
    scaleRef.value.handleEventType(event);
  }
};

// 鼠标松开事件
const mouseup = () => {
  scaleRef.value.mouseup();
};

//同步缩放信息到选中组件
const asyncChartInfo = (scaleInfo) => {
  let curItem = chartList.value[state.activeIndex];
  curItem.left = scaleInfo.left;
  curItem.top = scaleInfo.top;
  curItem.width = scaleInfo.width;
  curItem.height = scaleInfo.height;
};

//更新缩放信息
const updateScale = (curChart, event) => {
  console.log(curChart);
  scaleRef.value.asyncScaleInfo(curChart, event);
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  display: flex;
  .main-box {
    flex: 1;
    height: 100%;
    .header {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
    }
    .main-content {
      width: 100%;
      height: calc(100% - 40px);
      position: relative;
      user-select: none;
      .drag-group {
        width: 100%;
        height: 100%;
        position: relative;
        .chart-item {
          width: 300px;
          height: 300px;
          position: absolute;
        }
      }
    }
  }
}
</style>
